<!--
 * @Author: @Edwin
 * @Date: 2020-12-20 10:25:23
 * @LastEditors: jerry.zzy
 * @LastEditTime: 2021-08-04 19:21:34
 * @FilePath: \cang-chu-guan-li-xi-tong\src\components\common\chanChengPinInpot.vue
-->
<!-- 
所有页面的生成单据信息的组件

接受参数: 
对话框标题
单据表格列
物品表格列
原单名称: 如销售原单、采购原单等


返回的参数: 原单数据

-->
<template>
  <div>
    <!-- 原单生成按钮和表格 -->
    <a-button type="primary" @click="showModal">
      <a-icon type="plus" />
      根据{{ Modal }}生成
    </a-button>
    <a-modal
      :title="ModalTitle"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="70%"
    >
      <!-- 搜索表单---查询条件 -->
      <a-form v-bind="layout">
        <a-row>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
            <a-form-item label="时间期间">
              <a-range-picker
                v-model="searchForm.rangeDate"
                @change="getRangeTime"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
            <a-form-item label="单据状态">
              <a-select v-model="searchForm.documentClosed" style="width: 100%">
                <a-select-option
                  v-for="item in documentClosedList"
                  :key="item"
                  :value="item"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col
            :xl="8"
            :lg="8"
            :md="8"
            :sm="24"
            :xs="24"
            :style="{ textAlign: 'right' }"
          >
            <a-button type="primary" @click="Search()">查询</a-button>
            <a-button style="margin-left: 8px" @click="Reset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
      <!-- orderColumns  上半部分
listColumns 下半部分 -->
      <!-- 根据源单生产上半部分交互 -->
      <a-table
        style="margin-top: 20px"
        :pagination="pagination"
        :columns="orderColumns"
        @change="handleTableChange"
        :scroll="{ x: 1000 }"
        :data-source="orderDataSource"
        :row-selection="{
          selectedRowKeys: orderSelectedRowKeys,
          onChange: orderOnSelectChange,
          type: 'radio',
          getCheckboxProps: getCheckboxProps,
        }"
      >
        <!-- 审核标志 -->
        <span slot="documentClosed" slot-scope="text, record">
          <a-popconfirm
            title="是否关闭单据?"
            v-if="record.documentClosed == '开启'"
            @confirm="Giorto_up(record)"
          >
            <a> {{ text }} </a>
          </a-popconfirm>
          <a-popconfirm
            title="是否开启单据?"
            v-if="record.documentClosed == '关闭'"
            @confirm="Giorto_up(record)"
          >
            <a> {{ text }} </a>
          </a-popconfirm>
          <!-- <a @click="Giorto_up(record)"> {{ text }} </a> -->
        </span>
      </a-table>

      <!-- 下班部分表格 -->
      <a-table
        style="margin-top: 10px"
        :columns="listColumns"
        :data-source="ListDataSource"
        :scroll="{ x: 1500 }"
        :row-selection="{
          selectedRowKeys: listSelectedRowKeys,
          onChange: listOnSelectChange,
          getCheckboxProps: getCheckboxProps,
        }"
      >
        <!-- 审核标志 -->
        <span slot="documentClosed" slot-scope="text, record">
          <a-popconfirm
            title="是否关闭单据?"
            v-if="record.documentClosed == '开启'"
            @confirm="Giorto_down(record)"
          >
            <a> {{ text }} </a>
          </a-popconfirm>
          <a-popconfirm
            title="是否开启单据?"
            v-if="record.documentClosed == '关闭'"
            @confirm="Giorto_down(record)"
          >
            <a> {{ text }} </a>
          </a-popconfirm>
          <!-- <a @click="Giorto_down(record)"> {{ text }} </a> -->
        </span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { CommonAjax } from "@/services/modules/common";
import { ChanChengPinRuKuHttp } from "@/services/modules/RuKuGuGuanLi/ChanChengPinRuKu";

const comHttp = new CommonAjax(); // 公用接口
const chanChengPinRuKuHttp = new ChanChengPinRuKuHttp(); // 采购入库

export default {
  props: {
    // 对话框标题
    ModalTitle: {
      type: String,
      required: true,
    },

    Modal: {
      type: String,
      required: true,
    },
    // 表单列
    orderColumns: {
      type: Array,
      required: true,
    },
    // 列表列
    listColumns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      visible: false,

      searchForm: {
        rangeDate: null, // 时间范围
        departmentName: "",
        departmentId: "",
        documentClosed: "开启", //单据状态
        // 采购入库单提报部门
        reportDept: "", // 部门名称
        departmentNo: "", // 部门编号
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 5, //每页中显示5条数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },

      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },

      // 订单左侧选择框
      orderSelectedRowKeys: [], // 订单选择
      orderKeys: [],
      orderDataSource: [],

      // 列表左侧选择框
      listSelectedRowKeys: [], // 列表选择
      ListDataSource: [],

      startTime: "", // 开始时间
      endTime: "", // 结束时间
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 5, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },
      stockNoticeShowType: false,
      deparmentList: [], // 部门列表
      documentClosedList: ["开启", "关闭"],
      SelectData: [], // 选中的值
      originData: [],
      originData2: [],
      // --- rain
      queryCache: "",

      saveidfor_open_down: "",
    };
  },
  mounted() {
    this.getCarryOverList(); //获取采购订单列表
    // this.getSaleDepartmentList();
    // this.getClientList();
  },
  methods: {
    /**
     * @description: 分页函数 rain
     * @param {*} pagination
     * @return {*}
     */

    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getCarryOverList(this.queryCache);
    },

    // 表格选择事件  上
    orderOnSelectChange(selectedRowKeys, selectedRows) {
      //用于审核标志
      this.saveidfor_open_down = selectedRows[0].id;

      this.ListDataSource = [];
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      console.log("selectedRows changed11: ", selectedRows); //获取表格中一行数据
      this.originData2 = selectedRows;
      let id = selectedRows[0].id;
      console.log("id", id);

      // this.ListDataSource = selectedRows;
      this.orderSelectedRowKeys = selectedRowKeys;

      this.orderKeys = selectedRows;

      chanChengPinRuKuHttp.getMiddleListdetail("?headId=" + id).then((res) => {
        console.log("仓库-仓库结转详情按钮，这个详情查出来的是中间的表格", res);
        this.ListDataSource = res.result.list;
      });
    },
    // 列表选择事件  下
    listOnSelectChange(selectedRowKeys, selectedRows) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      // let key=selectedRowKeys-1;//选中的数据组下标志
      console.log("selectedRows changed: ", selectedRows); //选中的数据
      // this.getselectedRows=[];
      // for(let i=0;i<selectedRowKeys;i++){
      //   this.getselectedRows[i].push(selectedRows[i]);
      // }
      console.log(this.orderKeys);
      this.listSelectedRowKeys = selectedRowKeys;
      this.originData = selectedRows;

      this.originData[0].deliveryUnit = this.orderKeys[0].deliveryUnit;
      this.originData[0].deliveryUnit_dictText = this.orderKeys[0].deliveryUnit_dictText;
    },

    // ---------- 公用函数 ----------
    // 时间段
    getRangeTime(date, dateString) {
      console.log(date);
      this.startTime = dateString[0];
      this.endTime = dateString[1];
    },

    // 搜索
    Search() {
      let query = "";
      if (this.startTime) {
        query += `&beginDate=${this.startTime}`;
      }
      if (this.endTime) {
        query += `&endDate=${this.endTime}`;
      }
      query += `&documentClosed=${this.searchForm.documentClosed}`;
      this.queryCache = query;
      this.pagination.current = 1;
      this.pagination.total = 0;
      this.pagination.pageSize = 5;
      this.getCarryOverList(query);
    },

    // 获取全局查询条件
    getQueryPath() {
      console.log(this.searchForm);
      let queryPath = "?pageNo=" + this.queryParam.page + "&pageSize=5";
      return queryPath; // 返回的查询条件
    },
    // 重置
    // 重置
    Reset() {
      this.queryCache = "";
      this.pagination.current = 1;
      this.pagination.total = 0;
      this.pagination.pageSize = 5;

      this.form = {
        document_date: "", // 日期
        sendReceiveType: "", // 收发类别
        storageId: "", // 申请仓库名称
        storageName: "", // 仓库名称名称
        departmentNo: "", // 部门编号
        department: "", // 部门
      };
      this.searchForm = {
        rangeDate: null, // 时间范围
        departmentName: "",
        departmentId: "",
        documentClosed: "开启", //单据状态
        // 采购入库单提报部门
        reportDept: "", // 部门名称
        departmentNo: "", // 部门编号
      };
      this.getCarryOverList(); // 重置销售订单
      this.startTime = "";
      this.endTime = "";
      this.ListDataSource = []; // 重置物品数据
      this.listSelectedRowKeys = []; // 重置选择框中选中的值
      this.orderSelectedRowKeys = [];
    },
    //获取产成品入库单列表
    getCarryOverList(
      query = `&documentClosed=${this.searchForm.documentClosed}`
    ) {
      let _query = "?";
      _query += `pageNo=${this.pagination.current}`;
      _query += `&pageSize=${this.pagination.pageSize}`;
      _query += `&isExamine=${1}`;
      _query += query;

      chanChengPinRuKuHttp.getChanChengPinYuanDanList(_query).then((res) => {
        this.orderDataSource = [];
        console.log("----- 获取产成品入库单列表 -----", res);

        const pagination = { ...this.pagination };
        pagination.total = res.result.total;
        pagination.pageSize = res.result.size;
        this.pagination = pagination;

        for (let i = 0; i < res.result.records.length; i++) {
          let data = {
            key: (res.result.current - 1) * 5 + i + 1,
            ...res.result.records[i],
          };

          this.orderDataSource.push(data);
        }
      });
    },

    // 展示对话框
    showModal() {
      console.log("");
      this.stockNoticeShowType = true;
      this.getDeparmentTree(); // 获取部门树

      this.visible = true;
    },
    // 提交
    handleOk() {
      console.log("提交");
      this.Reset();

      console.log("emit 发送数据 --- ", this.originData);

      this.$emit("origin-data", this.originData); //将子组件的数据，传递到父组件
      this.$emit("origin-data2", this.originData2); //将子组件的数据，传递到父组件
      this.orderSelectedRowKeys = []; //上方table按钮
      this.listSelectedRowKeys = []; //下方table按钮
      this.ListDataSource = []; //下方rable重置

      this.visible = false;
    },

    // 取消
    handleCancel() {
      // this.$emit("origin-data", this.originData); //将子组件的数据，传递到父组件
      // this.getCarryOverList();
      this.Reset();
      this.visible = false;
    },

    // 根据业务需求,自己添加相应的样式和函数
    // 部门按钮触发
    DepartmentChange(value, option) {
      this.searchForm.departmentId = option.key;
    },
    // 获取销售订单列表
    // ----------- 用于备货通知单独有的 -----------
    // 获取部门列表
    getDeparmentTree() {
      comHttp.getDepartmentList().then((res) => {
        // let tree = this.resetTree(res.result);
        // console.log("获取部门树::::",tree);
        this.deparmentList = res.result;
        this.resetTree(this.deparmentList);
      });
    },
    // 树节点的 value值 变成 title,为了加上搜索框.
    resetTree(Tree) {
      Tree.forEach((item) => {
        item.value = item.title;
        if (item.children) {
          this.resetTree(item.children);
        }
      });
    },
    // 部门下拉框选择
    changeTreeNode(value, label, extra) {
      this.searchForm.departmentNo = extra.triggerNode.eventKey;
      console.log("选择的值::::", this.searchForm.departmentNo);
    },

    // 获取备货通知单列表
    getStockNoticeList() {
      console.log("获取当前备货通知单列表:::");
    },
    //todo 审核标志
    Giorto_up(record) {
      console.log(`选中该记录返回的所有信息:`, record);

      record.documentClosed === "开启"
        ? this.open("关闭", record)
        : this.open("开启", record);
    },
    Giorto_down(record) {
      console.log(`选中该记录返回的所有信息:`, record);
      record.documentClosed === "开启"
        ? this.open_down("关闭", record)
        : this.open_down("开启", record);
    },
    open(status, record) {
      console.log(`正在执行状态${status}功能:::::::::`);
      let data = {
        id: record.id,
        documentClosed: status,
      };
      chanChengPinRuKuHttp
        .updatebacteriawarehousecarryover(data)
        .then((res) => {
          if (!res.success) {
            this.$message.error(res.message);
            return;
          }
          this.$message.success(`${status}成功!`);
          this.getCarryOverList();
        });
    },
    open_down(status, record) {
      console.log(`正在执行状态${status}功能:::::::::`);
      let data = {
        id: record.id,
        documentClosed: status,
      };
      chanChengPinRuKuHttp.updateClosedbacteria(data).then((res) => {
        if (!res.success) {
          this.$message.error(res.message);
          return;
        }
        this.$message.success(`${status}成功!`);
        chanChengPinRuKuHttp
          .getMiddleListdetail("?headId=" + this.saveidfor_open_down)
          .then((res) => {
            this.ListDataSource = res.result.list;
          });
      });
    },

    getCheckboxProps(record) {
      return {
        props: {
          disabled: record.documentClosed === "关闭",
        },
      };
    },
  },
};
</script>

<style></style>
